<template>
  <div class="applet-baseconfig-container">
    <!-- 表单 -->
    <el-row>
      <el-col :span="6"><div style="color:#fff">1</div></el-col>
      <el-col :span="12">
        <el-form :model="baseConfig" label-width="100px">
          <el-form-item label="APPID">
            <el-input v-model="baseConfig.app_id" placeholder="请输入" size="small" style="max-width:70%"></el-input>
          </el-form-item>
          <el-form-item label="SECRET">
            <el-input v-model="baseConfig.secret" placeholder="请输入" size="small" style="max-width:70%"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6"><div style="color:#fff">1</div></el-col>
    </el-row>

    <div style="text-align:center;margin-top:10px">
      <el-button type="primary" size="small" style="padding:8px 30px;" @click="submit">保 存</el-button>
    </div>

    <Modal v-model="isUploadImg" width="1128" :footer-hide="true" :zIndex="99999">
      <photo-album v-if="isUploadImg" :maxcount="1" @selectPicData="getPicData"/>
    </Modal>

  </div>
</template>

<script>
import { getBaseInfo, putBaseInfo } from '@/api/applet'
import SelectImg from '@/components/SelectImg'
import PhotoAlbum from '@/components/PhotoAlbum'
import LPic from '@/components/lPic'

export default {
  name: 'AppletBaseInfo',
    components: {
        SelectImg,
        PhotoAlbum,
        LPic
    },
  data() {
    return {
      baseConfig: {
          app_id: '',
          secret: ''
      },
      isUploadImg: false,
    }
  },
  mounted() {
    this.getBaseInfo();
  },
  methods: {
    /**
     * 修改小程序基础配置
     */
    submit() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        app_id: this.baseConfig.app_id,
        secret: this.baseConfig.secret,
      }

      putBaseInfo(params).then(res => {
        if(res.status === 200) {
          this.$message.success('修改成功！');
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 获取小程序基础配置
     */
    getBaseInfo() {
        getBaseInfo({key: this.$store.state.app.activeApp.saa_key}).then(res => {
        if(res.status === 200) {
          this.baseConfig = {
            id: this.$store.state.app.activeApp.saa_key,
            config_type: 'miniprogranmpay',
            app_id: res.data.app_id,
            secret: res.data.secret,
          };
        }else{
          this.$message.error(res.message);
        }
      })
    },
      /**
       * 图片选择成功回调
       */
      getPicData(data){
          this.isUploadImg = false;
          if(this.picType === 1){
              this.groupData.pic_url = data[0].pic_url;
          }else{
              this.groupData.img_url = data[0].pic_url;
          }
      },
  },
}
</script>

<style lang="scss" scoped>
.applet-baseconfig-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.baseconfig-title{
  margin-top: 20px;
  text-align: center;
  &-button{
    padding: 15px 0;
  }
}
</style>
